<form class="form" >
  <div class="form-group">
    <label for="name"></label>
    <!--<input type="text" id="name" (keyup)="onKey($event)">-->
    <input type="text" #box (keyup.enter)="onKey(box.value)">
    <div>{{values}}</div>
  </div>
</form>
<div>
  <input type="text" #box1>
  <button class="btn btn-danger" (click)="addName(box1.value)">add</button>
  <ul>
    <li *ngFor="let hero of heros">{{hero}}</li>
  </ul>
</div>
<button (click)="myClick()" class="btn btn-success">提交</button>
<div>{{str}}</div>

<div class="container">
  <h1>Hero Form</h1>
  <form>
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" class="form-control" id="name" required
             [(ngModel)]="model.name" name="name" #spy>
      TODO:{{model.name}}
      TODO:{{spy.className}}
    </div>

    <div class="form-group">
      <label for="alterEgo">Alter Ego</label>
      <input type="text" class="form-control" id="alterEgo"
            [(ngModel)]="model.alterEgo" name="alterEgo"
      >
    </div>

    <div class="form-group">
      <label for="power">Hero Power</label>
      <select class="form-control" id="power" required
          [(ngModel)]="model.power" name="power"
      >
        <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
      </select>
    </div>

    <button type="submit" class="btn btn-success">Submit</button>

  </form>
</div>
